<template>
  <div class="container">
    <!-- <v-toolBar
            :fullPath='postData.opera'
            :tableColumns='tableColumns'
            @changeLie='getChangeLie'
            @getSearchIPArr='getToolBarSearchIPArr'
            @getSearchIP='getToolBarSearchIP'>
        </v-toolBar> -->

    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      border
      style="width: 100%"
    >
      <template v-for="item in tableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          v-if="item.isShow"
          :key="item.prop"
        >
        </el-table-column>
      </template>
    </el-table>
    <!-- <v-pagination
            :dataTotal="dataTotal" 
            :curPage="postData.curPage" 
            :pageSize="postData.pageSize" 
            @getCurPage="getPaginationCurPage"
            @getPageSize="getPaginationPageSize">
        </v-pagination> -->
  </div>
</template>

<script>
import { DBhhit } from "@/api/index.js";
import vPagination from "common/Pagination.vue";
import vToolBar from "common/toolbar/Toolbar.vue";
import tableColumns from "./DataHitTableColumns.js";
import bus from "common/bus.js";
import Isnull from "@/utils/ObjectIsNull";

export default {
  name: "datahit",
  props: {
    info: null,
  },
  components: {
    vPagination,
    vToolBar,
  },
  data() {
    return {
      postData: {
        opera: "dataGuard",
        curPage: 1,
        pageSize: 20,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {},
      },
      tableData: [],
      dataTotal: 0,
      tableColumns: tableColumns,
      SearchIPArr: [],
      searchJson: {},
      SearchIP: "",
      timerName: "MonitorInfoDataBaseOracleDG",
      timerEventName: "timerMonitorInfoDataBaseOracleDG",
      // timerInterval: 1000 * 60,
      loading: false,
      tableDataKey: [
        "BufferNowait",
        "BufferHit",
        "libraryHit",
        "Executetoparse",
        "parsecputoparseelapsed",
        "redonowait",
        "memorysort",
        "SoftParse",
        "latchHit",
        "nonparsecpu",
      ],
    };
  },
  created() {
    this.getTableData();
  },
  computed: {
    postDataFn() {
      return {
        postData: JSON.stringify(this.postData),
      };
    },
    timerInterval() {
      return Number(this.$store.state.pageRefresh) * 1000;
    },
  },
  methods: {
    getTableData() {
      this.loading = true;

      DBhhit({ ip: this.info.ip,sid:this.info.dbSid }).then((res) => {
        if (!Isnull(res)) {
          let data = {};
          res.forEach((item, index) => {
            data[this.tableDataKey[index]] = item;
          });
          this.tableData.push(data);
        } else {
          this.tableData = [];
        }

        this.loading = false;
      });
    },
  },
  watch: {},
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
  },
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>